<template>
	<view>
		<view class="u-text-center u-p-30">
			<text>领取优惠券</text>
		</view>
		
		<view class="u-p-30">
			<scroll-view scroll-y="true" style="max-height: 840rpx;">
				<view class="card u-m-b-30 card-bg" style="min-height: 180rpx;" v-for="(coupon, index) in dataList" :key="index" @click="handleObtainCoupon(coupon)">
					<view class="card-left">
						<template v-if="coupon.couponType == '1'">
							<!-- 代金券的场合 -->
							<view>
								<text class="text-bold u-font-44">{{coupon.deductionPrice | formatMoneyToYuanIntFilter}}</text>
								<text class="u-font-26 u-m-l-10 text-bold">元</text>
							</view>
							<view>
								<text class="u-font-26 text-bold" v-if="coupon.hasObtained == '0'">立即领取</text>
								<text class="u-font-26 text-bold" v-else style="opacity: 0.5;">已领取</text>
							</view>
						</template>
						<template v-else>
							<!-- 折扣券 -->
							<view>
								<text class="text-bold u-font-44">{{coupon.discountRate | formatDiscountFilter}}</text>
								<text class="u-font-26 u-m-l-10 text-bold">折</text>
							</view>
							<view >
								<text class="u-font-26 text-bold" v-if="coupon.hasObtained == '0'">立即领取</text>
								<text class="u-font-26 text-bold" v-else style="opacity: 0.5;">已领取</text>
							</view>
						</template>
					</view>
					<view class="card-right">
						<view class="u-line-1">
							<text class="text-bold u-font-32">{{coupon.couponName}}</text>
						</view>
						<view class="card-info text-bold u-m-t-10">
							<template v-if="coupon.couponType == '1'">
								<text>满</text>
								<text>{{coupon.orderPrice | formatMoneyToYuanIntFilter}}</text>
								<text>元减</text>
								<text>{{coupon.deductionPrice | formatMoneyToYuanIntFilter}}</text>
								<text>元</text>
							</template>
							<template v-else>
								<text>满</text>
								<text>{{coupon.orderPrice | formatMoneyToYuanIntFilter}}</text>
								<text>元打</text>
								<text>{{coupon.discountRate | formatDiscountFilter}}</text>
								<text>折</text>
							</template>
							
							<template v-if="coupon.point">
								<text class="u-m-l-10 u-m-r-10">+</text>
								<text>{{coupon.point}}</text>
								<text>积分</text>
							</template>
						</view>
						<view class="card-time">
							<view v-if="coupon.expirationType == '2'">
								<!-- 固定时间段的场合 -->
								<template v-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.inProgress">
									<!-- 进行中的场合 -->
									<text>有效期至</text>
									<text>{{formatDate(coupon.effectiveEndDate)}}</text>
								</template>
								<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.notStarted">
									<text>有效期:</text>
									<text>{{formatDate(coupon.effectiveStartDate)}}</text>
									<text>至</text>
									<text>{{formatDate(coupon.effectiveEndDate)}}</text>
								</template>
							</view>
							<!-- 领券后生效的场合 -->
							<view v-else-if="coupon.expirationType == '1'">
								<text>领取后</text>
								<text>{{coupon.effectiveDays}}</text>
								<text>天内有效</text>
							</view>
						</view>
						
						<!-- <view class="u-flex u-flex-end">
							<text class="text-white">立即领取</text>
						</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
		
			
	</view>
</template>

<script>
	import {getCouponList, getCouponListByUserId, obtainCoupon} from '@/api/coupon.js'
	import {mapGetters} from 'vuex'
	import dayjs from 'dayjs'
	import {jumpTypeEnum, couponCurrentStatusEnum} from '@/common/const.js'
	
	export default{
		data(){
			return{
				couponCurrentStatusEnum,
				dataList:[]
			}
		},
		computed:{
			...mapGetters(['isLogin']),
		},
		methods:{
			/**
			 * 初始化
			 */
			init(){
				if(this.isLogin){
					// 登录的场合
					getCouponListByUserId().then(res=>{
						this.dataList = res.data
					})
				} else {
					getCouponList().then(res=>{
						this.dataList = res.data
					})
				}
			},
			
			/**
			 * 格式化优惠券时间
			 */
			formatDate(val){
				return dayjs(val).format('YYYY-MM-DD')
			},
			
			/**
			 * 获取优惠券
			 */
			handleObtainCoupon(coupon){
				if(!this.isLogin){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/login/index', false)
					return
				}
				console.log(coupon)
				
				// 领取优惠券
				obtainCoupon({
					id: coupon.id
				}).then(res=>{
					this.$u.toast('领取成功')
					this.init()
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	
	 
	.card{
	  display: flex;
	  align-items: center;
	  width: 100%;
	  padding: 10px 0;
	  background: #fff;
	  border-radius: 8px;
	  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px),radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
	  -webkit-mask-size: 100%, 2px 4px;
	  -webkit-mask-repeat: repeat, repeat-y;
	  -webkit-mask-position: 0 -4px, 87px;
	  -webkit-mask-composite: source-out;
	  mask-composite: subtract;
	  //background: linear-gradient(45deg, orange, red);
	}
	
	.card-bg{
		background: linear-gradient(45deg, #FFB143, #FFECBF);
	}
	
	.card-obtain-bg{
		background: linear-gradient(45deg, #AAAAAA, #FFFFFF);
	}
	
	.card-left{
	  width: 88px;
	  text-align: center;
	  font-size: 18px;
	  color: #000;
	}
	.card-right{
	  padding: 6px 12px;
	  display: flex;
	  flex: 1;
	  flex-direction: column;
	}
	.card-info{
	  margin: 0;
	  font-size: 14px;
	  line-height: 20px;
	  color:#000;
	}
	.card-time{
	  font-size: 12px;
	  line-height: 16px;
	  font-weight: normal;
	  color: #000;
	  margin-top: 4px;
	}
</style>